<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-样式处理</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid;
        }

        .success{
            background-color: greenyellow;
        }

    </style>
</head>
<body>
<div id="app">

<!--    <div :style="style1">hell</div>-->

     <div :class="cls" class="test">

     </div>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>

    /***
     *  style:
     *     对象语法
     *     数组语法
     *  class
     *     对象语法
     *     数组语法
     * */

    new Vue({
        el:'#app',
        data:{
           style1:[{
               color:'red',
               fontSize:'20px'
           },{
               width:'100px',
               height:'100px',
               border:'1px solid'
           }],
            cls:[{
                box:true,
                success:true
            },{
               big:true
            }]
        }
    })

</script>
</html>